<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动页面</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f8fafc; color: #1f2937; margin: 0; padding: 0; display: flex; justify-content: center; }
        .container { width: 100%; max-width: 480px; background-color: #ffffff; }
        .search-filter-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background-color: #ffffff; border-bottom: 1px solid #e5e7eb; }
        .search-box { flex: 1; padding: 8px; margin-right: 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #6b7280; }
        .filter-button { background-color: #3b82f6; color: white; padding: 8px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
        .activity-card { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; margin: 10px; display: flex; align-items: center; gap: 10px; }
        .activity-card .thumbnail { width: 50px; height: 50px; background-color: #e5e7eb; border-radius: 8px; }
        .activity-details { flex: 1; }
        .activity-title { font-size: 14px; font-weight: bold; color: #374151; margin-bottom: 5px; }
        .activity-time, .activity-location, .activity-status { font-size: 12px; color: #6b7280; }
        .activity-status { color: #3b82f6; font-weight: bold; }
        .footer { display: flex; justify-content: space-around; padding: 10px 0; background-color: #ffffff; border-top: 1px solid #e5e7eb; }
        .footer div { text-align: center; font-size: 12px; color: #6b7280; }
        .footer img { width: 24px; height: 24px; margin-bottom: 4px; }
    </style>
</head>
<body>
    <div class="container">

        <!-- Search and Filter Bar -->
        <div class="search-filter-bar">
            <input type="text" class="search-box" placeholder="搜索活动">
            <div class="filter-button">筛选</div>
        </div>

        <!-- Activity List Section -->
        <div class="activity-card">
            <div class="thumbnail"></div>
            <div class="activity-details">
                <div class="activity-title">工会秋季登山活动</div>
                <div class="activity-time">时间：10月15日 上午9:00</div>
                <div class="activity-location">地点：北京植物园</div>
                <div class="activity-status">报名中</div>
            </div>
        </div>

        <div class="activity-card">
            <div class="thumbnail"></div>
            <div class="activity-details">
                <div class="activity-title">协会瑜伽体验课</div>
                <div class="activity-time">时间：10月20日 下午3:00</div>
                <div class="activity-location">地点：健康中心</div>
                <div class="activity-status">已满员</div>
            </div>
        </div>

        <!-- Footer Navigation -->
        <div class="footer">
            <div><div style="width: 24px; height: 24px; background-color: #3b82f6; border-radius: 4px; margin: 0 auto 4px;"></div>首页</div>
            <div><div style="width: 24px; height: 24px; background-color: #f59e0b; border-radius: 4px; margin: 0 auto 4px;"></div>活动</div>
            <div><div style="width: 24px; height: 24px; background-color: #10b981; border-radius: 4px; margin: 0 auto 4px;"></div>福利</div>
            <div><div style="width: 24px; height: 24px; background-color: #6366f1; border-radius: 4px; margin: 0 auto 4px;"></div>我的</div>
        </div>
    </div>
</body>
</html>
